<template>
  <div id="app">
    <!-- <notepad></notepad> -->
    <!-- <h2 id="mlh" ref="mlh">茉莉花</h2> -->
    <!-- <student
      :stuName="stuName"
      :grade="grade"
      :cls="cls"
      :age="age"
      @xxx="updateName"
    />
    <button @click="getDomElement">获取DOM元素</button> -->
    <user @showUserName="getUserName" />
    <!-- <user ref="user" /> -->
    <school @xxxx="getUserNameToSchool" />
  </div>
</template>

<script>
import User from "./components/User.vue";
import student from "./components/Student.vue";
import Notepad from "./components/Notepad.vue";
import school from "./components/School.vue";

export default {
  name: "App",
  components: {
    User,
    // student,
    // Notepad,
    school,
  },
  data() {
    return {
      // stuName: "佐菲奥特曼",
      // grade: "M78星",
      // cls: "光之1班",
      // age: 200,
    };
  },
  methods: {
    getUserName(name) {
      console.log("接收到User组件传递的数据," + name);
    },
    getUserNameToSchool(name) {
      console.log("接收到School组件传递的数据," + name);
    },
  },
  // mounted() {
  //   this.$refs.user.$on("showUserName", (name) => {
  //     console.log("使用“ref”给用户组件绑定一个自定义事件****," + name);
  //   });
  // },
};
</script>

<style>
</style>
